window.addEventListener('load', function() {
    var focus = this.document.querySelector('.focus');
    var ul = focus.children[0];
    var ol = focus.children[1];
    var w = focus.offsetWidth;
    // 定时器轮播图片
    var index = 0;
    var timer = setInterval(() => {
        index++;
        // translate CSS3 不需要加定位 
        var translateX = -index * w;
        // ul 添加过度效果
        ul.style.transition = 'all .3s';
        ul.style.transform = 'translateX(' + translateX + 'px)';
    }, 2000);

    // 等待过度动画完成后再去判断 transitionend 监听过度是否结束
    ul.addEventListener('transitionend', function() {
        // 无缝滚动
        if (index >= 3) {
            index = 0;
            // 无过度回到第一张图片
            ul.style.transition = 'none';
            var translatex = -index * w;
            ul.style.transform = 'translateX(' + translatex + 'px)';
        } else if (index < 0) {
            index = 2;
            // 无过度回到第一张图片
            ul.style.transition = 'none';
            var translatex = -index * w;
            ul.style.transform = 'translateX(' + translatex + 'px)';
        }

        // 指示器变化
        // 把 ol 里面 li 带有current类名的元素选出来 去除 current 类名
        ol.querySelector('li.current').classList.remove('current');
        // 让当前索引号 的小li 加上 current 使用classList.add() 方法
        ol.children[index].classList.add('current');
    });

    // 手指滑动轮播图
    // touchstart: 获取手指初始坐标
    var startX = 0;
    // 移动的距离
    var moveX = 0;
    // 判断是否进行了拖动操作
    var flag = false;
    ul.addEventListener('touchstart', function(e) {
        startX = e.targetTouches[0].pageX;
        // 触摸时停止定时器
        clearInterval(timer);
    });

    // 移动手指 touchmove：计算手指滑动距离，并且移动盒子
    ul.addEventListener('touchmove', function(e) {
        // 计算移动距离
        moveX = e.targetTouches[0].pageX - startX;
        // 移动盒子
        var translatex = -index * w + moveX;
        // 手指拖动的时候不需要动画效果
        ul.style.transition = 'none';
        ul.style.transform = 'translateX(' + translatex + 'px)';
        flag = true;
        e.preventDefault(); // 阻止屏幕滚动的行为
    });

    // 松开手指 开启定时器 并判断拖动距离(滚动到上一张或者回到原点)
    ul.addEventListener('touchend', function(e) {
        if (flag) {
            if (Math.abs(moveX) > 50) {
                if (moveX > 0) {
                    // 右滑移动到上一张
                    index--;
                } else {
                    // 左滑移动到下一张
                    index++;
                }
                var translatex = -index * w;
                ul.style.transition = 'all .3s';
                ul.style.transform = 'translateX(' + translatex + 'px)';
            } else {
                var translatex = -index * w;
                ul.style.transition = 'all .1s';
                ul.style.transform = 'translateX(' + translatex + 'px)';
            }
        }

        // 开启定时器(开启定时器之前先清除)
        clearInterval(timer);
        timer = setInterval(() => {
            index++;
            // translate CSS3 不需要加定位 
            var translateX = -index * w;
            // ul 添加过度效果
            ul.style.transition = 'all .3s';
            ul.style.transform = 'translateX(' + translateX + 'px)';
        }, 2000);
    });
});